<template>
    <div class="Library_management">

        <!-- 版心 -->
       <div class="Library_wrap">

           <!-- 头部 -->
           <div class="header">
               <div class="header_top">
                   <el-button size="medium" @click.stop="newBuilt">新建</el-button>
               </div>
               <div class="header_bottom">
                   <div class="header_left">全部信息</div>
                   <div class="header_right" style="width: 41%;">
                       <p>场馆总数：<span>{{zs}}</span></p>
                       <div class="header_ipt">
                           <span class="el-icon-search"></span>
                           <input  v-model="shuju" type="text" placeholder="输入Boss姓名或手机号">
                           <button @click="cx()">查询</button>
                       </div>
                   </div>
               </div>
           </div>
           <!-- 头部结束 -->
<el-table
    :data="tableData"
    :row-class-name="tableRowClassName"
      v-loading="loading"
    >
    <el-table-column
      type="index"
      label="序号"
    width="120"
    
      :index="indexMethod">
    </el-table-column>
    <el-table-column
      prop="username"
      label="BOSS姓名"
      width="200"
     >
    </el-table-column>
     <el-table-column
      prop="phone"
      label="手机号"
     >
    </el-table-column>
     <el-table-column
      prop="gym_name"
      label="场馆名称"
      >
    </el-table-column>
    <!-- <el-table-column
      prop="gym_address"
      label="场馆地址"
     > -->
    <!-- </el-table-column> -->
     <el-table-column
      prop="admin_str"
      label="身份"
     >
    </el-table-column>
     <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          style="color:#fff;background:#2f7dfe;"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
           style="background:#a93b3b;"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  
           <!-- 表格结束 -->

        <div style="float: right;margin-right: 19.7%;">
            <el-pagination
        @current-change='yemian'
        :current-page='yeshu'
        layout="prev, pager, next"
        :total='zs'>
        </el-pagination>
        </div>
       </div>
       
        <!-- 版心结束-->
        <!-- 添加馆主 -->
        <div class="newBuilt" v-show="addActive">
            <div class="add_owner">
                <div class="add_top">
                    <p>添加馆主</p>
                   <span class="el-icon-circle-close" @click.stop="hide"></span>
                </div>
                <div class="add_bottom">
                    <ul>
                         <li>
                            <span>手机号：</span>
                            <el-input v-model="sjh" placeholder="请输入手机号"></el-input>
                        </li>
                         <li>
                            <span>场馆名称</span>
                            <template>
                            <el-select v-model="value9"  filterable placeholder="请选择">
                                <el-option
                                v-for="item in options9"
                                :key="item.value"
                                :label="item.label"
                                :value="item.gym_name">
                                </el-option>
                            </el-select>
                            </template>
                        </li>
                         <li>
                            <span>身份：</span>
                            <template>
                            <el-select v-model="value8" @change="cg()" filterable placeholder="请选择">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.value"
                                :value="item.value">
                                </el-option>
                            </el-select>
                            </template>
                        </li>
                    </ul>
                </div>
                <div  @click.stop="label" class="add_submit">确认添加</div>
            </div>
        </div>
        <div class="newBuilt" v-show="addActives">
            <div class="add_owner">
                <div class="add_top">
                    <p>修改馆主</p>
                   <span class="el-icon-circle-close" @click.stop="hides"></span>
                </div>
                <div class="add_bottom">
                    <ul>
                        <li>
                            <span>馆主姓名：</span>
                            <el-input v-model="usernames" placeholder="请输入手机号"></el-input>
                        </li>
                         <li>
                            <span>手机号：</span>
                            <el-input v-model="phones" placeholder="请输入手机号"></el-input>
                        </li>
                         <li>
                            <span>场馆名称</span>
                            <template>
                            <el-select v-model="value9" disabled filterable placeholder="请选择">
                                <el-option
                                v-for="item in options9"
                                :key="item.value"
                                :label="item.label"
                                :value="item.gym_name">
                                </el-option>
                            </el-select>
                            </template>
                        </li>
                         <li>
                            <span>身份：</span>
                            <template>
                            <el-select v-model="value8" @change="cg()" filterable placeholder="请选择">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.value"
                                :value="item.value">
                                </el-option>
                            </el-select>
                            </template>
                        </li>
                    </ul>
                </div>
                <div  @click.stop="labels" class="add_submit">确认修改</div>
            </div>
        </div>
    </div>
</template>
<style>
  .el-table .warning-row {
    background: oldlace;
  }
  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
<script>
export default {
    data(){
        return{
            tableData: [{
          username: '魏术超',
          phone:'15135934855',
          site:'奥德健身蜗牛瑜家旗舰店',
          admin_str:'Boss',
          province: '上海',
          city: '普陀区',
        //   gym_address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
          tag: '家'
        }],
        addActive:false,
        phones:'',
        usernames:'',
        input:'',
        sjh:'',
        xm:'',
        addActives:false,
        dialogVisible: false,
        zs:'',
        yeshu:1,
        state:'',
        loading: true,
        options: [{
          label: '2',
          value: '馆主'
        }, {
          label: '4',
          value: '负责人'
        },
        {
          label: '3',
          value: '前台'
        },],
        value8: '馆主',
        options9:'',
        value9:'',
        rowId:'',
        shuju:'',
        }
    },
    mounted(){
        this.ajax()
    },
    methods:{
      ajax(){
        let obj = {
        }
        let _this = this;
        let qs = require("qs");
        this.$axios.post("/yujiaextend/gymadmin/findAllGymAdminByCondition", qs.stringify(obj), {
            headers: {
            "Content-Type": "application/x-www-form-urlencoded"
            }
        })
        .then((response) =>{
            _this.zs=response.data.data[0]
            _this.tableData=response.data.data[1]
            _this.loading=false
        })
        .catch(function(error) {
            console.log(error);
        });
         this.$axios.post("yujiaextend/gymadmin/findAllGymBySuperAdmin", qs.stringify(obj), {
            headers: {
            "Content-Type": "application/x-www-form-urlencoded"
            }
        })
        .then(function(response) {
          _this.options9=response.data.data
        })
        .catch(function(error) {
            console.log(error);
        });
      },  
      yemian(yeshu){
           let obj = {
             page:yeshu
            }
            console.log(obj)
            let _this = this;
            let qs = require("qs");
            this.$axios.post("/yujiaextend/gymadmin/findAllGymAdminByCondition", qs.stringify(obj), {
                headers: {
                "Content-Type": "application/x-www-form-urlencoded"
                }
            })
            .then((response) =>{
                _this.zs=response.data.data[0]
                _this.tableData=response.data.data[1]
                _this.loading=false
            })
            .catch((error)=> {
                console.log(error);
            });
      },
      handleDelete(done,row) {
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let obj = {
              gymAdminId:row.id
        }
        let _this = this;
        let qs = require("qs");
        this.$axios.post("/yujiaextend/gymadmin/setGymAdminValidIsOff", qs.stringify(obj), {
            headers: {
            "Content-Type": "application/x-www-form-urlencoded"
            }
        })
        .then((response)=> {
            if(response.data.code == 1){
                 _this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                _this.ajax()
            }else{
                 _this.$message({
                    type: 'error',
                    message: '删除失败!'
                });
            }
        })
        .catch((error)=> {
            console.log(error);
        });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },  
      indexMethod(index) {
        return index * 1+1;
      },
       handleEdit(index, row) {
           this.rowId=row.id
         this.addActives = true
         let obj = {
             gymAdminId:row.id
        }
        let _this = this;
        let qs = require("qs");
        this.$axios.post("/yujiaextend/gymadmin/findGymAdminInfoBySuperAdmin", qs.stringify(obj), {
            headers: {
            "Content-Type": "application/x-www-form-urlencoded"
            }
        })
        .then(function(response) {
            _this.phones=response.data.data.phone
            _this.usernames=response.data.data.username
            _this.value9=response.data.data.gym_name
            
        })
        .catch(function(error) {
            console.log(error);
        });
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      newBuilt(){
          this.addActive = true
      },
      cg(){
        console.log(adminType)
      },
      labels(){
        if(this.phones == ''){
                this.$message({
                    message: '手机号不可为空',
                    type: 'warning'
                    });
               return
           }
        if(this.usernames == ''){
                this.$message({
                    message: '馆主姓名不可为空',
                    type: 'warning'
                    });
               return
           }
         var arr=this.options9
         for (var i=0;i<arr.length;i++){
             if(this.value9 == arr[i].gym_name){
                 var gymId=arr[i].id
             }
        }   
         var arrs=this.options
         for (var i=0;i<arrs.length;i++){
             if(this.value8 == arrs[i].value){
                 var adminType=arrs[i].label
             }
        }   
        let obj = {
            gymAdminId: this.rowId,
            phone:this.phones,
            adminType:adminType,
            userName:this.usernames
        }   
        let _this = this;
        let qs = require("qs");
        this.$axios.post("/yujiaextend/gymadmin/updateYogaGymAdminInfoBySuperAdmin", qs.stringify(obj), {
            headers: {
            "Content-Type": "application/x-www-form-urlencoded"
            }
        })
        .then(function(response) {
            if(response.data.code == 1){
                 _this.$message({
                    type: 'success',
                    message: '修改成功!'
                });
                _this.addActives = false
                _this.ajax()
            }else{
                 _this.$message({
                    type: 'error',
                    message: '修改失败!'
                });
            }
        })
        .catch((error)=> {
            console.log(error);
        });
      },
       label(){

        if(this.sjh == ''){
                this.$message({
                    message: '手机号不可为空',
                    type: 'warning'
                    });
               return
           }
        var arr=this.options9
         for (var i=0;i<arr.length;i++){
             if(this.value9 == arr[i].gym_name){
                 var gymId=arr[i].id
             }
        }   
         var arrs=this.options
         for (var i=0;i<arrs.length;i++){
             if(this.value8 == arrs[i].value){
                 var adminType=arrs[i].label
             }
        }   
        let obj = {
            gymId: gymId,
            phone:this.sjh,
            adminType:adminType
        }
        // console.log(obj)
        let _this = this;
        let qs = require("qs");
        this.$axios.post("/yujiaextend/gymadmin/addGymAdminBySuperAdmin", qs.stringify(obj), {
            headers: {
            "Content-Type": "application/x-www-form-urlencoded"
            }
        })
        .then(function(response) {
              if(response.data.code == 1){
                 _this.$message({
                    type: 'success',
                    message: '添加成功!'
                });
                _this.addActive = false
                 _this.ajax()
            }else{
                 _this.$message({
                    type: 'error',
                    message: '添加失败!'
                });
            }
        })
        .catch(function(error) {
            console.log(error);
        });
        
      },
        hide(){
          this.addActive = false

      },
       hides(){
           alert
          this.addActives = false

      },
      cx(){
        let obj = {
            condition:this.shuju
        }
        // console.log(obj)
        let _this = this;
        let qs = require("qs");
        this.$axios.post("/yujiaextend/gymadmin/findAllGymAdminByCondition", qs.stringify(obj), {
            headers: {
            "Content-Type": "application/x-www-form-urlencoded"
            }
        })
        .then((response) =>{
            _this.zs=response.data.data[0]
            _this.tableData=response.data.data[1]
            _this.loading=false
        })
        .catch((error)=> {
            console.log(error);
        });
      }
    }
}
</script>
<style scoped>
.el-select {
    display: inline-block;
    position: relative;
    width: 100%;
}
.Library_management{
    width: 100%;
    height: 100%;
    background: #f2f2f2;
    position: absolute;
    left: 250px;
    top: 0;
    z-index: 2;
}
/* 版心 */
.Library_wrap{
width: 100%;
height: 100%;
margin-left: 3%;
}
.Library_wrap .header{
    width: 100%;
    margin-top: 35px;
}
.Library_wrap .header .header_top .el-button--medium{
    width: 90px;
    height: 34px;
    background: #2871e9;
}
.el-button{
    color: #fff
}
.Library_wrap .header .header_bottom{
    width: 100%;
   display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #cdcdcd;
}
.Library_wrap .header .header_bottom .header_left{
    font-size: 16px;
    color: #000000;
  
}
.Library_wrap .header .header_bottom .header_right{
    width:58%;
    display: flex;
    align-items: center;
    /* padding-right: 20%; */
}
.Library_wrap .header .header_bottom .header_right p{
    font-size: 16px;
    color: #010101;
    margin-right: 13px;
}
.Library_wrap .header .header_bottom .header_right p span{
    font-size: 16px;
    color: #2f7dfe;
    font-weight: bold;
}
.Library_wrap .header .header_bottom .header_right .header_ipt{

    height: 30px;
    background: #dfdfdf;
    border-radius: 15px;
    display: flex;
    align-items: center;
    margin-left: 27px!important;
}
.Library_wrap .header .header_bottom .header_right .header_ipt span{
    display: inline-block;
    color: #b9b9b9;
    margin-left: 10px;
}
.Library_wrap .header .header_bottom .header_right .header_ipt input{
    border: none;
    height:30px;
    outline: none;
    background: #dfdfdf;
    margin-left: 5px;
}
.Library_wrap .header .header_bottom .header_right .header_ipt button{
    width: 55px;
    height: 26px;
    line-height:26px;
     padding: 0 10px;
    border: none;
    border-radius: 15px;
    background: #2e7bfb;
    font-size: 14px;
    color: #ffffff;
}

/* 版心结束 */
/* 表格 */
.el-table{
    width: 80%;
    margin-top: 20px;

}
.el-table tr th{
text-align: center!important;
}


/* 表格结束 */
/* 添加馆主*/
.newBuilt{
    width:100%;
    height:100%;
    position: absolute;
    left:-250px;
    top:0;
    z-index:5;
    background:rgba(0,0,0,0.4)

}
.newBuilt .add_owner{
    width:560px;
    background:#fff;
    margin:146px auto;
    border-radius:6px;
    box-shadow: 0px 1px 12px 0px rgba(41, 47, 61, .1);
    padding:0 40px;
    padding-bottom:40px;
}
.newBuilt .add_owner .add_top{
 width:100%;
  display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top:40px;
}
.newBuilt .add_owner .add_top p{
    font-size:20px;
    padding-bottom:5px;
    border-bottom:3px solid #286fe6;
    color:#000;
    font-weight:bold;
}
.newBuilt .add_owner .add_top span{
    font-size:18px;
    display: inline-block;
}
.newBuilt .add_owner .add_bottom{
    width:100%;
}
.newBuilt .add_owner .add_bottom ul{
    width:100%;
}
.newBuilt .add_owner .add_bottom ul li{
    width:94%;
     display: flex;
    align-items: center;
    margin-top:35px;

}
.newBuilt .add_owner .add_bottom ul li span{
    display: inline-block;
    width:25%;
    font-size:16px;
    color:#000000;
}
.newBuilt .add_owner .add_submit{
    width:48%;
    height:40px;
    line-height:40px;

    margin:0 auto;
    text-align:center;
    background:#2f7dfe;
    border-radius:4px;
    margin-top:90px;
    font-size:16px;
    color:#fff;
}
/* 添加馆主结束 */

</style>

